<div class="mission-list-wrap">
  <div class="mdl-card mdl-shadow--2dp block-transition-500ms" (mouseenter)="mouseHover = i" (mouseleave)="mouseHover = null"
       [class.mdl-shadow--6dp]="mouseHover === i" *ngFor="let list of missionList; let i =index;">
    <div class="mdl-card__title">
      <span class="mission-list-size">{{list.size}}</span>
    </div>
    <div class="mdl-card__supporting-text"><i class="material-icons">extension</i>{{list.title}}</div>
    <div class="mdl-card__actions mdl-card--border cf">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary" (click)="openModal(modal,list)">Start</button>
    </div>
    <div class="mdl-card__menu">
      <div class="mdl-card__supporting-text"><i class="material-icons">local_offer</i>{{list.id}}</div>
    </div>
  </div>
</div>
<app-modal #modal>
  <div class="modal-content">
    <div class="header">
      <h3><i class="material-icons">blur_on</i>{{modalList?.title}}</h3>
      <button class="mdl-button mdl-js-button mdl-button--icon" (click)="modal.close()"><i class="material-icons">close</i></button>
    </div>
    <div class="content">
      <table>
        <tr>
          <td style="width:100px">普通模式：</td>
          <td>此模式下系统会自动判断点击是否正确，如果正确则填入，如果错误则失去一条生命；每行或每列填写完成后系统会自动补充当前行或列其余部分。</td>
        </tr>
        <tr>
          <td style="width:100px">进阶模式：</td>
          <td>此模式下系统不会自动判断点击是否正确，玩家需要自己进行所有推断，直至找到答案。</td>
        </tr>
      </table>
    </div>
    <div class="actions">
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="modalAction(modal,{id: modalList?.id, type: '0'})">普通模式</button>
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="modalAction(modal,{id: modalList?.id, type: '1'})">进阶模式</button>
    </div>
  </div>
</app-modal>
